import React from "react";
import "../css/InputBox.css";
import { PENDDING } from "./config";
class InputBox extends React.Component {
  //定义组件的初始化状态
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div className="header-container">
        <div className="header-title">
          <h1>ToDoList</h1>
        </div>
        <div className="header-input">
          <input type="text" className="input-text"
            placeholder="添加ToDo"
            ref="todoInput">

          </input>
          <button type="button" className="input-button"
            onClick={() => {
              //获取输入框的value
              var value = this.refs.todoInput.value;
              //容错判断 
              if (value.length === 0) {
                alert("添加的内容不能为空");
                return;
              }

              //组装todo对象
              var todo = {
                content: value,
                status: PENDDING//未经定义的魔法值
              }
              this.props.addTodo(todo)
            }}>
            添加
            </button>
        </div>
      </div>
    );
  }
}
export default InputBox;